<template>
    <div>
        <el-upload
            ref='upload'
            class="upload-demo"
            :action='actionUrl'
            :auto-upload="true"
            :on-exceed="outlimit"
            :limit="maxNum"
            :file-list="fileList"
            :on-change="uploadonchange"
            :on-remove="uploadRemove"
            :on-success='getUpload'
            :disabled='isFalse'
            name='files'
            list-type="picture">
            <el-button size="small" class='theme-button'>点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
                仅支持 jpg、png、gif 格式
            </div>
        </el-upload>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        files:{
            // type: Array,
            default () {
                return []
            }
        },
        fileList: {
            type: Array,
            default () {
                return []
            }
        },
        maxNum: {
            type: Number,
            default () {
                return 4;
            }
        },
        isFalse: {
            type: Boolean,
            default () {
                return false;
            }
        }
    },
    data() {
        return {
            actionUrl:localStorage.getItem("requestUrl")+'file/upload'
        };
    },
    computed: {},
    methods: {
        getUpload(res,file,fileList){
            this.$emit('getUpload',{res,file,fileList})
        },
        //超过上传限制
        outlimit(){
            this.$notify.error({
                title: '提示',
                message: '超出上传文件个数限制!',
                showClose: false
            });
        },
        uploadonchange(file,filelist){
            // this.fileList.push(file)
            const isJPG = file.raw.type === 'image/jpeg';
            const isPNG = file.raw.type === 'image/png';
            const isGIF = file.raw.type === 'image/gif';
            const isLt2M = file.raw.size / 1024 / 1024 < 2;
            if (!isJPG && !isPNG && !isGIF) {
                this.$notify.error({
                    title: '提示',
                    message: '上传文件只能是 JPG、PNG、GIF格式!',
                    showClose: false
                });
                this.fileList.pop()
            }


            //不做大小限制
            // if (!isLt2M) {
            //     this.$notify.error({
            //         title: '提示',
            //         message: '上传文件大小不能超过 2MB!',
            //         showClose: false
            //     });
            //     this.fileList.pop()
            // }
            // return   isLt2M;
        },
        uploadRemove(file,filelist){
            let fileList = this.fileList;
            if(fileList && fileList.length>0){
                for(var i=0;i<fileList.length;i++){
                    if(fileList[i]==file){
                        fileList.splice(i, 1)
                        break;
                    }
                }
            }
        }
    },
};
</script>

<style lang='less' scoped>

</style>
